<template>
	<div class="card_table tableSelf">
		<header class="config_arr btwn" style="borderBottom:none">
			<div class="left">
				<el-switch v-if="byFieldsBool" v-model="structure" active-text="分层" inactive-text="平铺"></el-switch>
			</div>
			<div class="right">
				<el-date-picker
					size="small"
					clearable
					:picker-options="pickerOptions"
					v-model="dateRange"
					class="time"
					placeholder="日期限定"
				></el-date-picker>
				<el-tooltip
					v-if="!structure"
					class="tishi"
					effect="light"
					:content="dateCollapse?'折叠日期':'展开日期'"
					placement="bottom"
				>
					<i @click="dateCollapseChange" class="el-icon-date"></i>
				</el-tooltip>
				<el-tooltip class="tishi" effect="light" content="导出" placement="bottom">
					<i class="el-icon-position"></i>
				</el-tooltip>
			</div>
		</header>
		<section :key="updateBool" v-loading="loading">
			<!-- 无分组 平铺 折叠日期 -->
			<template
				v-if="!byFieldsBool&&!dateCollapse&&table_nogroup_tile_nodate.length>0&&allRes.length>0"
			>
				<el-table
					:data="table_nogroup_tile_nodate"
					border
					style="width: 100%"
					:header-cell-style="{background:'#f2f8ff'}"
					empty-text="未知"
				>
					<el-table-column align="center" width="260" :prop="time" label="日期">
						<template slot-scope="scope">
							{{zeroDel(scope.row.time)}}
							<!-- <span class="tableBD tableBDSmall" v-if="scope.row.time.one">
                <span class="one">{{zeroDel(scope.row.time.one)}}</span>
                <span class="two">VS</span>
                <span class="three">{{zeroDel(scope.row.time.two)}}</span>
              </span>
              <span v-else>
                <span>{{zeroDel(scope.row.time)}}</span>
              </span> -->
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						min-width="200"
						v-for="(_i,_in) in  queryTotal.messures"
						:key="_i.echartId"
						:prop="_i.echartId"
					>
						<template slot="header">
              <span class="table_head">
                <span class="icon">{{convert(_in+1)}}</span>
                {{_i.name}}
              </span>
						</template>
						<template slot-scope="scope">
							{{scope.row[_i.echartId]}}
							<!-- <span class="tableBD" v-if="scope.row[_i.id].one">
                <span class="one">{{scope.row[_i.id].one}}</span>
                <span class="two">VS</span>
                <span class="three">{{scope.row[_i.id].two}}</span>
                <span
                  :class="upDown(scope.row[_i.id].one,scope.row[_i.id].two)>=0?'up':'down'"
                >{{upDown(scope.row[_i.id].one,scope.row[_i.id].two)}}%</span>
              </span>
              <span v-else>
                <span>{{scope.row[_i.id]}}</span>
              </span> -->
						</template>
					</el-table-column>
				</el-table>
			</template>

			<!-- 无分组 平铺 展开日期 -->
			<template
				v-if="!byFieldsBool&&dateCollapse&&table_nogroup_tile_date.length>0&&allRes.length>0"
			>
				<el-table
					:data="table_nogroup_tile_date"
					border
					style="width: 100%"
					:header-cell-style="{background:'#f2f8ff'}"
					empty-text="未知"
				>
					<el-table-column align="left" width="180" :prop="time" label="指标">
						<template slot-scope="scope">
              <span class="table_head">
                <span class="icon">{{convert(scope.row.messures.index+1)}}</span>
                {{scope.row.messures.name}}
              </span>
							<!-- <span class="table_head" v-if="scope.row.messures.one">
                <span class="icon">{{convert(scope.row.messures.one.index+1)}}</span>
                {{scope.row.messures.one.name}}
              </span>
              <span class="table_head" v-else>
                <span class="icon">{{convert(scope.row.messures.index+1)}}</span>
                {{scope.row.messures.name}}
              </span> -->
						</template>
					</el-table-column>

					<el-table-column align="center" min-width="240">
						<template slot="header">
							<el-select v-model="tableType" size="mini" placeholder="请选择">
								<el-option label="合计" :value="1"></el-option>
								<el-option label="均值" :value="2"></el-option>
								<el-option label="最小值" :value="3"></el-option>
								<el-option label="最大值" :value="4"></el-option>
							</el-select>
							<!-- <span class="timeSpan" v-if="table_nogroup_tile_date[0].time.one">
                <span class="one">{{table_nogroup_tile_date[0].time.one.name}}</span>
                <br>
                {{table_nogroup_tile_date[0].time.two.name}}
              </span>
              <span class="timeSpan" v-else>
                <el-select v-model="tableType" size="mini" placeholder="请选择">
                  <el-option label="合计" :value="1"></el-option>
                  <el-option label="均值" :value="2"></el-option>
                  <el-option label="最小值" :value="3"></el-option>
                  <el-option label="最大值" :value="4"></el-option>
                </el-select>
              </span> -->
						</template>

						<template slot-scope="scope">
							<span v-if="tableType==1">{{scope.row.time.value}}</span>
							<span v-if="tableType==2">{{scope.row.time.avgValue}}</span>
							<span v-if="tableType==3">{{scope.row.time.minValue}}</span>
							<span v-if="tableType==4">{{scope.row.time.maxValue}}</span>
							<!-- <span class="tableBD" v-if="scope.row.time.one">
                <span class="one">{{scope.row.time.one.value}}</span>
                <span class="two">VS</span>
                <span class="three">{{scope.row.time.two.value}}</span>
                <span
                  :class="upDown(scope.row.time.one.value,scope.row.time.two.value)>=0?'up':'down'"
                >{{upDown(scope.row.time.one.value,scope.row.time.two.value)}}%</span>
              </span>
              <span v-else>
                <span v-if="tableType==1">{{scope.row.time.value}}</span>
                <span v-if="tableType==2">{{scope.row.time.avgValue}}</span>
                <span v-if="tableType==3">{{scope.row.time.minValue}}</span>
                <span v-if="tableType==4">{{scope.row.time.maxValue}}</span>
              </span> -->
						</template>
					</el-table-column>

					<el-table-column
						align="center"
						min-width="240"
						v-for="(_i) in timeChoose(allRes[0].totalDetailResult.series)"
						:key="_i"
					>
						<template slot="header">
							<span class="timeSpan">{{zeroDel(_i.name)}}</span>
							<!-- <span class="timeSpan" v-if="allRes.length==2">
                <span class="one">{{_i.name}}</span>
                <br>
                {{allRes[1].totalDetailResult.series[_i.index]}}
              </span>
              <span class="timeSpan" v-else>{{_i.name}}</span> -->
						</template>
						<template slot-scope="scope">
							<span>{{scope.row[_i.index]}}</span>
							<!-- <span class="tableBD" v-if="scope.row[_i.index].one">
                <span class="one">{{scope.row[_i.index].one}}</span>
                <span class="two">VS</span>
                <span class="three">{{scope.row[_i.index].two}}</span>
                <span
                  :class="upDown(scope.row[_i.index].one,scope.row[_i.index].two)>=0?'up':'down'"
                >{{upDown(scope.row[_i.index].one,scope.row[_i.index].two)}}%</span>
              </span>
              <span v-else>
                <span>{{scope.row[_i.index]}}</span>
              </span> -->
						</template>
					</el-table-column>
				</el-table>
			</template>

			<!-- 有分组 平铺 展开日期-->
			<template v-if="byFieldsBool&&!structure&&dateCollapse&&allRes.length>0">
				<el-table
					:data="groupScreening(table_group_tile_date)"
					border
					:span-method="arraySpanMethod"
					style="width: 100%"
					:header-cell-style="{background:'#f2f8ff'}"
					empty-text="未知"
				>
					<el-table-column
						align="center"
						min-width="160"
						v-for="(_i,_in) in  allRes[0].detailResult.byFields"
						:key="_i.id"
						:label="_i.propertyName"
						:prop="_i.id"
					>
						<template slot="header">
							<groupChoose
								@change="groupChange($event,_in)"
								:name="_i.propertyName"
								:optionsArr="arrGroupOptions[_in].options"
								:checkedArr="arrGroupOptions[_in].checked"
							></groupChoose>
						</template>
						<template slot-scope="scope">
							<span>{{scope.row[_i.id]}}</span>
							<!-- <span v-if="scope.row[_i.id].one">
                <span>{{scope.row[_i.id].one}}</span>
              </span>
              <span v-else>
                <span>{{scope.row[_i.id]}}</span>
              </span> -->
						</template>
					</el-table-column>

					<el-table-column align="left" min-width="240" label="指标" prop="zhibiao">
						<template slot-scope="scope">
               <span class="table_head" >
                <span class="icon">{{convert(scope.row.zhibiao.index+1)}}</span>
                {{scope.row.zhibiao.name}}
              </span>
							<!-- <span class="table_head" v-if="scope.row.zhibiao.one">
                <span class="icon">{{convert(scope.row.zhibiao.one.index+1)}}</span>
                {{scope.row.zhibiao.one.name}}
              </span>
              <span class="table_head" v-else>
                <span class="icon">{{convert(scope.row.zhibiao.index+1)}}</span>
                {{scope.row.zhibiao.name}}
              </span> -->
						</template>
					</el-table-column>
					<el-table-column align="center" min-width="240">
						<template slot="header">
              <span class="timeSpan" v-if="allRes.length==2">
                <span class="one">
                  {{allRes[0].totalDetailResult.series[0]}} 至
                  {{allRes[0].totalDetailResult.series[allRes[0].totalDetailResult.series.length-1]}}
                </span>
                <br>
                <span class="one">
                  {{allRes[1].totalDetailResult.series[0]}} 至
                  {{allRes[1].totalDetailResult.series[allRes[1].totalDetailResult.series.length-1]}}
                </span>
              </span>
							<span class="timeSpan" v-else>
                <el-select v-model="tableTypeGroup" size="mini" placeholder="请选择">
                  <el-option label="合计" :value="1"></el-option>
                  <el-option label="均值" :value="2"></el-option>
                  <el-option label="最小值" :value="3"></el-option>
                  <el-option label="最大值" :value="4"></el-option>
                </el-select>
              </span>
						</template>
						<template slot-scope="scope">
							<span v-if="tableTypeGroup==1">{{scope.row.total.value}}</span>
							<span v-if="tableTypeGroup==2">{{scope.row.total.avgValue}}</span>
							<span v-if="tableTypeGroup==3">{{scope.row.total.minValue}}</span>
							<span v-if="tableTypeGroup==4">{{scope.row.total.maxValue}}</span>
							<!-- <span class="tableBD" v-if="scope.row.total.one">
                <span class="one">{{scope.row.total.one.value}}</span>
                <br>
                <span class="three">{{scope.row.total.two.value}}</span>
              </span>
              <span v-else>
                <span v-if="tableTypeGroup==1">{{scope.row.total.value}}</span>
                <span v-if="tableTypeGroup==2">{{scope.row.total.avgValue}}</span>
                <span v-if="tableTypeGroup==3">{{scope.row.total.minValue}}</span>
                <span v-if="tableTypeGroup==4">{{scope.row.total.maxValue}}</span>
              </span> -->
						</template>
					</el-table-column>

					<el-table-column
						align="center"
						min-width="240"
						v-for="(_i) in  timeChoose(allRes[0].totalDetailResult.series)"
						:key="_i"
					>
						<template slot="header">
              <span class="timeSpan" v-if="allRes.length==2">
                <span class="one">{{_i.name}}</span>
                <br>
                {{allRes[1].totalDetailResult.series[_i.index]}}
              </span>
							<span class="timeSpan" v-else>{{zeroDel(_i.name)}}</span>
						</template>
						<template slot-scope="scope">
							<span>{{scope.row[_i.index]}}</span>
							<!-- <span class="tableBD" v-if="scope.row[_i.index].one">
                <span class="one">{{scope.row[_i.index].one}}</span>
                <span class="two">VS</span>
                <span class="three">{{scope.row[_i.index].two}}</span>
                <span
                  :class="upDown(scope.row[_i.index].one,scope.row[_i.index].two)>=0?'up':'down'"
                >{{upDown(scope.row[_i.index].one,scope.row[_i.index].two)}}%</span>
              </span>
              <span v-else>
                <span>{{scope.row[_i.index]}}</span>
              </span> -->
						</template>
					</el-table-column>
				</el-table>
			</template>

			<!-- 有分组 平铺 折叠日期 -->
			<template v-if="byFieldsBool&&!structure&&!dateCollapse&&allRes.length>0">
				<!-- table_group_tile_nodate -->
				<el-table
					:data="groupScreening(table_group_tile_nodate)"
					style="width: 100%"
					row-key="id"
					:tree-props="{children: 'children'}"
					:header-cell-style="{background:'#f2f8ff'}"
					empty-text="未知"
				>
					<el-table-column align="left" width="60"></el-table-column>
					<!-- 160 -->
					<el-table-column
						align="center"
						:width="_in==allRes[0].detailResult.byFields.length-1?240:140"
						v-for="(_i,_in) in  allRes[0].detailResult.byFields"
						:key="_i.id"
						:label="_i.propertyName"
						:prop="_i.id"
					>
						<template slot="header">
							<groupChoose
								@change="groupChange($event,_in)"
								:name="_i.propertyName"
								:optionsArr="arrGroupOptions[_in].options"
								:checkedArr="arrGroupOptions[_in].checked"
							></groupChoose>
						</template>
						<template slot-scope="scope">
							<span>{{scope.row[_i.id]}}</span>
							<!-- <span class="tableBD" v-if="scope.row[_i.id].one">
                <span class="one">{{scope.row[_i.id].one}}</span>
                <span class="zhi">至</span>
                <span class="three">{{scope.row[_i.id].two}}</span>
              </span>
              <span v-else>
                <span>{{scope.row[_i.id]}}</span>
              </span> -->
						</template>
					</el-table-column>

					<el-table-column
						align="center"
						min-width="200"
						v-for="(_i,_in) in  queryTotal.messures"
						:key="_i.echartId"
						:prop="_i.echartId"
					>
						<template slot="header">
              <span class="table_head">
                <span class="icon">{{convert(_in+1)}}</span>
                {{_i.name}}
              </span>
						</template>
						<template slot-scope="scope">
							<span>{{scope.row[_i.echartId]}}</span>
							<!-- <span class="tableBD" v-if="scope.row[_i.id].one">
                <span class="one">{{scope.row[_i.id].one}}</span>
                <span class="two">VS</span>
                <span class="three">{{scope.row[_i.id].two}}</span>
                <span
                  :class="upDown(scope.row[_i.id].one,scope.row[_i.id].two)>=0?'up':'down'"
                >{{upDown(scope.row[_i.id].one,scope.row[_i.id].two)}}%</span>
              </span>
              <span v-else>
                <span>{{scope.row[_i.id]}}</span>
              </span> -->
						</template>
					</el-table-column>
				</el-table>
			</template>

			<!-- 有分组 分层 -->
			<template v-if="byFieldsBool&&structure&&allRes.length>0">
				<div class="groupBox">
					<layeredPanel
						:currentPage="currentPage"
						:pageSize="pageSize"
						:lastWidth="260"
						:widthGroup="200"
						:widthIndex="200"
						:dateScreen="dateRange"
						:enter="queryTotal"
						:out="allRes"
					></layeredPanel>
				</div>
			</template>
		</section>
		<footer>
			<el-pagination
				v-if="total>currentPage && byFieldsBool"
				:current-page="currentPage"
				:page-sizes="[5, 10, 30, 50, 100]"
				@size-change="handleSizeChange"
				@current-change="current_change"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>
		</footer>
	</div>
</template>
<script>
	import layeredPanel from "./layeredPanel.vue"; // 引入分层表格组件
	import groupChoose from "./groupChoose.vue"; // 引入分组筛选选择组件
	let sTime = 0;
	let eTime = 0;
	export default {
		name: "tableSelf",
		props: {
			queryTotal: {
				type: Object,
				default: () => {
					return {};
				}
			},
			// 外部查询结果集
			queryDataArr:{
				type: Array,
				default: () => {
					return [];
				}
			}
		},
		components: {
			layeredPanel,
			groupChoose
		},
		data() {
			return {
				loading:false,
				currentPage: 1, // 当前页码
				pageSize: 5, // 每页数量
				total: 0, // 数据总量
				arrGroupOptions: [], // 分组可选值
				tableTypeGroup: 1, // 有分组 平铺 展开日期下的 合计 均值 最小值 最大值
				tableType: 1, // 无分组 平铺 展开日期下的 合计 均值 最小值 最大值
				updateBool: 0,
				byFieldsBool: false, // 判断是否具有分组参数
				allRes: [], // 存储请求的全部数据
				dateCollapse: false, // 是否展开日期
				dateRange: null, // 日期限定，表格数据筛选
				structure: false, // 判断是否分层开关
				//  日期选择器时间限定范围函数
				pickerOptions: {
					disabledDate: time => {
						return time.getTime() > eTime || time.getTime() < sTime - 8.64e7; //大于当前的禁止，小于7天前的禁止
					}
				},
				table_nogroup_tile_nodate: [], // 无分组 平铺 折叠日期  表格
				table_nogroup_tile_date: [], // 无分组 平铺 展开日期  表格
				table_group_tile_date: [], // 有分组 平铺 展开日期  表格
				table_group_tile_nodate: [] // 有分组 平铺 折叠日期  表格
			};
		},
		watch: {
			dateRange: {
				handler() {
					this.tableInit();
				},
				deep: true
			},
			structure: {
				handler() {
					this.tableInit();
				},
				deep: true
			},
			queryTotal: {
				handler() {
					this.loading = true;
				},
				deep: true
			},
			queryDataArr: {
				handler() {
					this.queryDataHandle();
				},
				deep: true
			}
		},
		methods: {
			// 数据查询函数
			async queryDataHandle() {
				this.loading = false;
				if(!this.queryDataArr||this.queryDataArr.length<1){
					return
				}
				this.total = this.queryDataArr[0].detailResult.rows.length;
				//  根据出参 限定日期选择范围
				let st = this.queryDataArr[0].detailResult.series[0];
				let et =
					this.queryDataArr[0].detailResult.series[
					this.queryDataArr[0].detailResult.series.length - 1
						];
				sTime = new Date(st);
				eTime = new Date(et);
				// 判断是否具有分组属性
				if (this.queryTotal.byFields && this.queryTotal.byFields.length > 0) {
					this.byFieldsBool = true;
					this.arrGroupOptions = this.getArrGroup(this.queryTotal, this.queryDataArr);
				} else {
					this.byFieldsBool = false;
				}
				this.allRes = this.queryDataArr; // 保存全部出参
				this.tableInit(); //  执行表格渲染函数
			},
			groupChange(arr, index) {
				this.arrGroupOptions[index].checked = JSON.parse(JSON.stringify(arr));
			},
			handleSizeChange(v) {
				this.pageSize = v;
				this.tableInit();
			},
			current_change(v) {
				this.currentPage = v;
				this.tableInit();
			},
			// 时间列筛选
			timeChoose(arr) {
				let _arr = [];
				arr.map((item, index) => {
					if (!this.dateRange) {
						_arr.push({
							name: item,
							index: index
						});
					}
					if (this.zeroDel(this.dateRange) == item) {
						_arr.push({
							name: item,
							index: index
						});
					}
				});
				return _arr;
			},
			// 在有分组的情况下，根据选中分组值进行表格筛选
			groupScreening(arr) {
				let _arr = arr.filter(item => {
					let bool = true;

					try {
						this.arrGroupOptions.map(_i => {
							let _bool = false;
							_i.checked.map(_is => {
								if (
									_is == item[_i.id] ||
									_is == item[_i.id].one ||
									_is == item[_i.id].two
								) {
									_bool = true;
								}
							});
							if (!_bool) {
								bool = false;
							}
						});
					} catch (err) {
						console.log(err, "分组筛选错误");
					}
					return bool;
				});
				return _arr;
			},
			// 获取分组可选值函数
			getArrGroup(enter, out) {
				let _arr = JSON.parse(JSON.stringify(enter.byFields));
				_arr.map(_i => {
					_i.options = [];
				});
				out.map(item => {
					item.detailResult.rows.map(itemRow => {
						itemRow.byValues.map((itemByv, indexByv) => {
							if (_arr[indexByv]) {
								_arr[indexByv].options.push(itemByv);
							}
						});
					});
				});
				_arr.map(item => {
					item.options = Array.from(new Set(item.options));
					item.checked = Array.from(new Set(item.options));
				});
				return _arr;
			},
			// 计算上升下降比例
			upDown(one, two) {
				if (!two || two == 0) {
					return 100;
				}
				return ((one - two) / two).toFixed(2) * 100;
			},
			// 折叠展开日期函数
			dateCollapseChange() {
				this.dateCollapse = !this.dateCollapse;
				this.tableInit();
			},
			// 时间戳转日期
			zeroDel(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				let mon = date.getMonth() + 1;
				let day = date.getDate();
				mon = mon < 10 ? "0" + mon : mon;
				day = day < 10 ? "0" + day : day;
				return year + "-" + mon + "-" + day;
			},
			//  0 - 25  转化 a - z
			convert(num) {
				return num <= 26
					? String.fromCharCode(num + 64)
					: this.convert(~~((num - 1) / 26)) + this.convert(num % 26 || 26);
			},
			// 分页函数
			pageHandle(arr, currentPage, pageSize) {
				let _arr = [];
				currentPage = Number(currentPage);
				pageSize = Number(pageSize);
				for (
					let i = (currentPage - 1) * pageSize;
					i <= (currentPage - 1) * pageSize + pageSize - 1;
					i++
				) {
					if (arr[i]) {
						_arr.push(JSON.parse(JSON.stringify(arr[i])));
					}
				}

				return _arr;
			},
			// 表格数据绘制函数
			tableInit() {
				// 具有分组值时，更新分组列选中项
				if (this.byFieldsBool) {
					this.arrGroupOptions = this.getArrGroup(this.queryTotal, this.allRes);
				}
				let arr = JSON.parse(JSON.stringify(this.allRes));
				// 无分组 平铺 折叠日期  表格
				if (!this.byFieldsBool && !this.dateCollapse) {
					let resArr = [];
					arr.map(item => {
						let _arr = [];
						// 根据时间长度生成对应表格对应行
						item.totalDetailResult.series.map((itemTime, indexTime) => {
							let obj = {};
							// 生成时间列
							obj.time = itemTime;
							// 根据入参，生成指标列
							this.queryTotal.messures.map((itemMess, indexMess) => {
								obj[itemMess.echartId] =
									item.totalDetailResult.rows[0].values[indexTime][indexMess];
							});
							_arr.push(obj);
						});
						resArr.push(_arr);
					});
					if (resArr.length == 2) {
						let _arr = [];
						resArr[0].map((_i, _in) => {
							let obj = {};
							for (let key in _i) {
								obj[key] = {
									one: _i[key],
									two: resArr[1][_in][key]
								};
							}
							_arr.push(obj);
						});
						resArr = _arr;
					}
					if (resArr.length == 1) {
						resArr = resArr[0];
					}
					this.table_nogroup_tile_nodate = JSON.parse(JSON.stringify(resArr));
				}

				// 无分组 平铺 展开日期  表格
				if (!this.byFieldsBool && this.dateCollapse) {
					let resArr = [];
					arr.map(item => {
						let _arr = [];
						// 行数根据入参指标生成
						this.queryTotal.messures.map((itemMess, indexMess) => {
							let obj = {};
							// 生成指标列
							obj.messures = {
								name: itemMess.name,
								index: indexMess
							};
							// 生成日期合并计算列
							obj.time = {
								name:
									item.totalDetailResult.series[0] +
									"至" +
									item.totalDetailResult.series[
									item.totalDetailResult.series.length - 1
										],
								value: item.rollUpResult.rows[0].values[0][indexMess],
								minValue: item.rollUpResult.rows[0].minValues[0][indexMess],
								maxValue: item.rollUpResult.rows[0].maxValues[0][indexMess],
								avgValue: item.rollUpResult.rows[0].avgValues[0][indexMess]
							};
							// 生成每天的数据列
							item.totalDetailResult.series.map((itemSer, indexSer) => {
								obj[indexSer] =
									item.totalDetailResult.rows[0].values[indexSer][indexMess];
							});

							_arr.push(obj);
						});
						resArr.push(_arr);
					});
					if (resArr.length == 2) {
						let _arr = [];
						resArr[0].map((_i, _in) => {
							let obj = {};
							for (let key in _i) {
								obj[key] = {
									one: _i[key],
									two: resArr[1][_in][key]
								};
							}
							_arr.push(obj);
						});
						resArr = _arr;
					}
					if (resArr.length == 1) {
						resArr = resArr[0];
					}
					this.table_nogroup_tile_date = JSON.parse(JSON.stringify(resArr));
				}

				// 有分组 平铺 展开日期  表格
				if (this.byFieldsBool && !this.structure && this.dateCollapse) {
					let resArr = [];
					arr.map(item => {
						let _arr = [];
						let pageArr = this.pageHandle(
							item.detailResult.rows,
							this.currentPage,
							this.pageSize
						);
						pageArr.map((itemRow, indexRow) => {
							this.queryTotal.messures.map((itemMess, indexMess) => {
								let obj = {};
								// 分组值列追加
								item.detailResult.byFields.map((itemBY, indexBY) => {
									obj[itemBY.id] = itemRow.byValues[indexBY];
								});
								// 指标列
								obj.zhibiao = {
									index: indexMess,
									name: itemMess.name
								};
								// 合计值列
								obj.total = {
									value: item.rollUpResult.rows[indexRow].values[0][indexMess],
									minValue:
										item.rollUpResult.rows[indexRow].minValues[0][indexMess],
									maxValue:
										item.rollUpResult.rows[indexRow].maxValues[0][indexMess],
									avgValue:
										item.rollUpResult.rows[indexRow].avgValues[0][indexMess]
								};

								// 时间列追加
								item.detailResult.series.map((itemTime, indexTime) => {
									obj[indexTime] = itemRow.values[indexTime][indexMess];
								});
								_arr.push(obj);
							});
						});
						resArr.push(_arr);
					});
					if (resArr.length == 2) {
						let _arr = [];
						resArr[0].map((_i, _in) => {
							let obj = {};
							for (let key in _i) {
								obj[key] = {
									one: _i[key],
									two: resArr[1][_in][key]
								};
							}
							_arr.push(obj);
						});
						resArr = _arr;
					}
					if (resArr.length == 1) {
						resArr = resArr[0];
					}
					this.table_group_tile_date = JSON.parse(JSON.stringify(resArr));
				}
				// 有分组 平铺 折叠日期  表格
				if (this.byFieldsBool && !this.structure && !this.dateCollapse) {
					let resArr = [];
					arr.map(item => {
						let _arr = [];
						let pageArr = this.pageHandle(
							item.rollUpResult.rows,
							this.currentPage,
							this.pageSize
						);
						pageArr.map(itemRow => {
							let obj = {};
							obj.id = itemRow.byValues.join("$id$");
							obj.children = [];
							// 分组列追加
							this.queryTotal.byFields.map((itemBY, indexBY) => {
								obj[itemBY.id] = itemRow.byValues[indexBY];
							});
							// 指标列追加
							this.queryTotal.messures.map((itemMess, indexMess) => {
								obj[itemMess.echartId] = itemRow.values[0][indexMess];
							});
							// 时间分割子级列表
							let str = itemRow.byValues.join("");
							let objChildren;
							item.detailResult.rows.map(itemDeta => {
								if (str == itemDeta.byValues.join("")) {
									objChildren = JSON.parse(JSON.stringify(itemDeta));
								}
							});
							if (objChildren) {
								objChildren.values.map((itemChildren, indexChildren) => {
									// 对日期筛选
									let time = arr[0].detailResult.series[indexChildren];
									if (this.zeroDel(this.dateRange) == time || !this.dateRange) {
										let _obj = {};
										_obj.id = itemRow.byValues.join("$id$") + indexChildren;
										// 分组列追加
										item.rollUpResult.byFields.map((itemBY, indexBY) => {
											if (indexBY == item.rollUpResult.byFields.length - 1) {
												_obj[itemBY.id] = this.zeroDel(item.detailResult.series[indexChildren]);
											} else {
												_obj[itemBY.id] = "";
											}
										});
										// 指标列追加
										this.queryTotal.messures.map((itemMess, indexMess) => {
											_obj[itemMess.echartId] = itemChildren[indexMess];
										});
										// console.log(_obj,'objtime')
										obj.children.push(_obj);
									}
								});
							}

							_arr.push(obj);
						});
						resArr.push(_arr);
					});
					if (resArr.length == 2) {
						resArr = this.arrMerge(resArr);
					}
					if (resArr.length == 1) {
						resArr = resArr[0];
					}
					this.table_group_tile_nodate = JSON.parse(
						JSON.stringify(this.aproArrangement(resArr, this.queryTotal.byFields))
					);
				}
				this.updateBool++;
			},
			arrMerge(arr) {
				let _arr = [];

				for (let i = 0; i <= arr[0].length - 1; i++) {
					let obj = {};
					for (let key in arr[0][i]) {
						let str = null;
						this.queryTotal.messures.map(_i => {
							if (_i.id == key) {
								str = "指标";
							}
						});
						this.queryTotal.byFields.map(_i => {
							if (_i.id == key) {
								str = "分组";
							}
						});
						if (str == "指标") {
							obj[key] = {
								one: arr[0][i][key],
								two: arr[1][i][key]
							};
						}
						if (str == "分组" || key == "id") {
							obj[key] = arr[0][i][key];
						}
						if (key == "children" && !str) {
							let _arr = [];
							// obj.children = arr[0][i].children
							arr[0][i].children.map((_i, _in) => {
								let _obj = {};
								for (let _key in _i) {
									let bool = false;
									this.queryTotal.messures.map(_is => {
										if (_is.id == _key) {
											bool = "指标";
										}
									});
									this.queryTotal.byFields.map(_is => {
										if (_is.id == _key) {
											bool = "分组";
										}
									});
									if (bool == "指标") {
										_obj[_key] = {
											one: arr[0][i].children[_in][_key],
											two: arr[1][i].children[_in][_key]
										};
									} else if (bool == "分组") {
										if (arr[0][i].children[_in][_key]) {
											_obj[_key] = {
												one: arr[0][i].children[_in][_key],
												two: arr[1][i].children[_in][_key]
											};
										} else {
											_obj[_key] = _i[_key];
										}
									} else {
										_obj[_key] = _i[_key];
									}
								}
								_arr.push(_obj);
							});
							obj.children = _arr;
						}
					}
					_arr.push(obj);
				}
				return _arr;
			},
			// 将数组根据分组值进行近似排布
			aproArrangement(arr, key, index = 0) {
				if (!key || key.length == 0 || !key[index]) {
					return arr;
				}
				let _arr = JSON.parse(JSON.stringify(arr));
				let _key = JSON.parse(JSON.stringify(key));
				_arr.sort((a, b) => {
					return a[_key[index].id].localeCompare(b[_key[index].id]);
				});
				if (key[index + 1]) {
					let arrIndex = [0];
					for (let i = 1; i <= _arr.length - 1; i++) {
						if (_arr[i][key[index].id] !== _arr[i - 1][key[index].id]) {
							arrIndex.push(i);
						}
					}
					arrIndex.push(_arr.length);
					let arrSlice = [];
					for (let j = 0; j <= arrIndex.length - 2; j++) {
						let _arrSub = _arr.slice(arrIndex[j], arrIndex[j + 1]);
						arrSlice.push(_arrSub);
					}

					for (let k = 0; k <= arrSlice.length - 1; k++) {
						arrSlice[k] = this.aproArrangement(arrSlice[k], key, index + 1);
					}
					return arrSlice.flat();
				}

				return _arr;
			},
			// 分组 平铺 展开日期合并单元格计算
			arraySpanMethod({ rowIndex, columnIndex }) {
				let num = this.queryTotal.messures.length;
				if (rowIndex % num === 0) {
					if (columnIndex < this.queryTotal.byFields.length) {
						return [num, 1];
					}
				}
				if (rowIndex % num !== 0) {
					if (columnIndex < this.queryTotal.byFields.length) {
						return [0, 0];
					}
				}
			}
		},
		beforeCreate() {},
		created() {
			this.queryDataHandle(); // 查询全部数据
		},
		beforeMount() {},
		mounted() {},
		computed: {}
	};
</script>

<style scoped lang="scss">
	// .el-table .cell
	::v-deep .groupBox .el-table__body-wrapper {
		height: 0;
		overflow: hidden;
	}
	::v-deep .el-table {
		margin: 0 auto;
	}
	::v-deep label .el-input--suffix {
		height: 0.5rem;
		overflow: hidden;
	}
	// .tableSelf::-webkit-scrollbar {
	//   display: none;
	// }
	::v-deep .tableBDShow {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left {
			width: 60%;
			height: 100%;
			display: inline-block;
			text-align: right;
			.top {
				color: #1f2d3d;
				font-size: 0.26rem;
				padding-right: 0.6rem;
			}
			.btm {
				font-size: 0.2rem;
				color: #909399;
			}
		}
		.right {
			display: inline-block;
			height: 100%;
			width: 40%;
		}
	}
	// 比对样式
	::v-deep .tableBD {
		width: 100%;
		display: inline-block;
		.one {
			color: #1f2d3d;
			font-size: 0.22rem;
			margin: 0 0.2rem 0 0;
		}
		.two {
			display: inline-block;
			font-size: 0.16rem;
			background: #f6f7f8;
			line-height: 1;
			border-radius: 50%;
			margin: 0 0.2rem 0 0;
			border: 1px solid #e0e6ed;
			text-align: center;
			padding: 4px 5px;
		}
		.zhi {
			margin: 0 0.2rem 0 0;
		}
		.three {
			font-size: 0.2rem;
			color: #909399;
			margin: 0 0.2rem 0 0;
		}
		.up,
		.down {
			font-size: 0.16rem;
		}
		.up {
			color: #00bf8a;
		}
		.down {
			color: red;
		}
	}
	::v-deep .tableBDSmall {
		.one {
			font-size: 0.2rem;
		}
		.three {
			color: #1f2d3d;
		}
	}
	::v-deep .timeSpan {
		font-size: 9px;
		font-weight: 400;
		letter-spacing: 3px;
		.one {
			font-size: 12px;
			font-weight: 600;
		}
	}
	::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
		background-color: rgba($color: #01b27a, $alpha: 0.1);
	}
	.table_head {
		.icon {
			background: #00bf8a;
			color: white;
			display: inline-block;
			text-align: center;
			line-height: 0.3rem;
			width: 0.3rem;
			cursor: pointer;
			height: 0.3rem;
			border-radius: 50%;
			margin: 0 0.1rem;
		}
	}
	.tableSelf {
		box-sizing: border-box;
		// overflow: scroll;
		margin: 0.3rem auto;
		padding-bottom: 0.2rem;
		.config_arr {
			width: 100%;
			margin: 0.1rem auto;
			min-height: 0.6rem;
			border-bottom: 1px solid #e4e7ed;
			.cancle_arr {
				height: 0.6rem;
				cursor: pointer;
				width: 3.8rem;
				line-height: 0.5rem;
				font-size: 12px;
				opacity: 0.3;
				.icon {
					display: inline-block;
					text-align: center;
					line-height: 0.3rem;
					width: 0.3rem;
					cursor: pointer;
					height: 0.3rem;
					background: #c0c4cc;
					border-radius: 50%;
					color: #606266;
					margin: 0 0.1rem;
				}
				.no_icon {
					display: inline-block;
					text-align: center;
					line-height: 0.3rem;
					width: 0.3rem;
					cursor: pointer;
					height: 0.3rem;
					border-radius: 50%;
					color: white;
					margin: 0 0.1rem;
					background: #909399;
				}
			}
			.index_arr {
				opacity: 1;
				.icon {
					background: #00bf8a;
					color: white;
				}
			}
		}
		.btwn {
			min-height: 0.8rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.min_el {
				width: 1.6rem;
				margin-right: 0.3rem;
			}
			.time {
				width: 3.8rem;
				margin: 0 0.1rem;
			}
			.total_screen {
				cursor: pointer;
				position: relative;
				width: 99%;
				margin: 0 0 0 0.2rem;
				color: #307ef2;
				i {
					font-weight: 800;
				}
			}
			.right {
				span {
					width: 0.4rem;
					height: 0.4rem;
					display: inline-block;
					text-align: center;
					line-height: 0.4rem;
					margin: 0 0.1rem;
					border-radius: 2px;
				}
				.active {
					background: rgba($color: #01b27a, $alpha: 0.6);
					color: rgba($color: white, $alpha: 0.8);
					font-weight: 800;
				}
			}
		}
		.tishi {
			width: 0.6rem;
			text-align: center;
			i {
				font-weight: 800 !important;
				font-size: 26px !important;
			}
		}
		footer {
			height: 1rem;
			display: flex;
			align-items: flex-end;
			justify-content: flex-end;
		}
	}
</style>
